<template>
  <div id="taxi-city-list">
    <md-scroll-view
      id="city-box"
      ref="scrollView"
      :scrolling-x="false"
      :bouncing="false"
      :auto-reflow="true"
      @scroll="$_onScroll"
    >
      <div
        id="currentLocation"
        v-if="getCurrentLocation.city && searchValue == ''"
        @click="currentLocationClick"
      >当前定位城市：{{getCurrentLocation.city}}</div>
      <div
        v-for="(item, $index) in taxiSortedCitys"
        :key="$index"
        class="scroll-view-list scroll-view-category"
        v-if="searchValue == ''"
      >
        <div class="letter scroll-view-category-title" :ref="item.letter">{{item.letter}}</div>
        <div class="city-name" v-for="(city, $c) in item.data" :key="$c" @click="submit(city)">{{city.city}}</div>
      </div>
      <div class="scroll-view-list" v-if="searchValue != '' && resultList.length > 0">
        <div class="gaps"></div>
        <div class="city-name" v-for="(city, $c) in resultList" :key="$c" @click="submit(city)">{{city.city}}</div>
      </div>
      <div class="no-result" v-if="searchValue != '' && resultList.length==0">
        <md-icon class="icon" name="taxi_add_kst"></md-icon>
        <div class="text">暂无结果</div>
      </div>
    </md-scroll-view>
    <div
      v-if="activeBlockIndex != ''"
      v-show="searchValue == ''&&scrollY>58"
      class="scroll-view-striky-title"
    >{{ activeBlockIndex }}</div>
    <letter-field id="letter-field" :value="taxiSortedCitys" @change="scrollToLetter" v-if="searchValue == ''"></letter-field>
  </div>
</template>

<script>
import '@/assets/svgs/taxi_add_kst.svg';
import { mapGetters } from 'vuex';
import { Field, FieldItem, ScrollView, ScrollViewRefresh, ScrollViewMore, Icon } from 'mand-mobile';
import LetterField from '@/views/home/LetterField';
const PinyinEngine = require('pinyin-engine');
var pinyinEngine = null;
export default {
  name: 'taxi-city-list',
  props: {
    searchValue: {
      type: String,
      default: ''
    }
  },
  components: {
    [Field.name]: Field,
    [FieldItem.name]: FieldItem,
    [ScrollView.name]: ScrollView,
    [ScrollViewRefresh.name]: ScrollViewRefresh,
    [ScrollViewMore.name]: ScrollViewMore,
    [LetterField.name]: LetterField,
    [Icon.name]: Icon
  },
  data() {
    return {
      resultList: [],
      dimensions: [],
      scrollY: 0
    };
  },
  watch: {
    searchValue: 'onValueChange'
  },
  created() {
    console.log('出租车城市选择列表初始化');
    this.$store.dispatch('getTaxiCitys').then(() => {
      pinyinEngine = new PinyinEngine(this.taxiCitys, 'city');
      this.$_initScrollBlock();
      this.$emit('ready');
    });
  },
  methods: {
    onValueChange(newVal) {
      if (pinyinEngine) {
        this.resultList = pinyinEngine.query(newVal);
      }
    },
    $_initScrollBlock() {
      const blocks = this.$el.querySelectorAll('.scroll-view-category');
      let offset = 0;
      Array.prototype.slice.call(blocks).forEach((block, index) => {
        const innerHeight = block.clientHeight;
        this.$set(this.dimensions, index, [offset, offset + innerHeight]);
        offset += innerHeight;
      });
    },
    $_onScroll({ scrollTop }) {
      this.scrollY = scrollTop;
    },
    scrollToLetter(letter) {
      this.$refs.scrollView.scrollTo(0, this.$refs[letter][0].offsetTop, true);
    },
    currentLocationClick() {
      this.$emit('cancel');
    },
    submit(city) {
      this.$emit('submit', city);
    }
  },
  computed: {
    ...mapGetters(['taxiCitys', 'taxiSortedCitys', 'getCurrentLocation']),
    activeBlockIndex() {
      let activeIndex = '';
      this.dimensions.forEach((dimension, index) => {
        if (this.scrollY >= dimension[0] && this.scrollY <= dimension[1]) {
          let word = this.taxiSortedCitys[index];
          activeIndex = word.letter;
        }
      });
      return activeIndex;
    }
  }
};
</script>

<style lang="stylus" scoped>
#taxi-city-list {
  height: calc(100vh - 88px);

  #currentLocation {
    background-color: #fff;
    height: 88px;
    font-size: 28px;
    line-height: 88px;
    padding-left: 30px;
  }

  #city-box {
    height: calc(100vh - 88px);

    .scroll-view-list {
      font-size: 28px;

      .letter {
        background-color: color-primary-background;
        padding: 20px 30px;
        color: color-text-caption;
        width: 100vw;
      }

      .city-name {
        background-color: #fff;
        border-bottom: 1px solid #E0E0E0;
        padding: 30px;
      }

      .gaps {
        background-color: color-primary-background;
        height: 20px;
      }
    }
  }

  #letter-field {
    height: 100vh;
    bottom: 0px;
  }

  .scroll-view-striky-title {
    position: absolute;
    top: 88px;
    left: 0;
    right: 0;
    background-color: color-primary-background;
    padding: 20px;
    color: color-text-caption;
    width: 100vw;
  }

  .no-result {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 256px;

    .icon {
      width: 80px;
      height: 80px;
    }

    .text {
      font-size: 28px;
      color: rgba(102, 102, 102, 1);
    }
  }
}
</style>
